<template>
  <div class='container'>
    <div class="BackColor">
      <div class="top">
        <!-- 新增题库按钮 -->
          <div style="text-align:right;width:100%;padding-right:17px">
            <el-button type="success" @click="$router.push('/questions/new')">新增题库</el-button>
          </div>

        <!-- 表格 -->
         <el-form :model="ruleForm" ref="ruleForm" label-width="68px" class="demo-ruleForm" style="margin-top:15px">
          <el-form :inline="true" :model="formInline" class="demo-form-inline" >

            <el-form-item label="学科" label-width="68px" >
              <el-select v-model="formInline.subject" placeholder="请选择" @change="adderji">
                <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="二级目录" label-width="68px">
              <el-select v-model="formInline.regionSeacodMl" placeholder="请选择">
                 <el-option v-for="v in regionSeacodMl" :key="v.value" :label="v.label" :value="v.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="标签" label-width="68px">
              <el-select v-model="formInline.subject2" placeholder="请选择">
                <el-option v-for="item in subjectList2" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="关键字" label-width="68px">
              <el-input v-model="form.name" placeholder="根据题干搜索"></el-input>
            </el-form-item>

          </el-form>

            <!-- 第二排 -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">

            <el-form-item label="试题类型" label-width="68px">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="难度" label-width="68px">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="方向" label-width="68px">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="录入人" label-width="68px">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>

          </el-form>

            <!-- 第三排 -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">

            <el-form-item label="题目备注" label-width="68px">
              <el-input v-model="form.name" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="企业简称" label-width="68px">
              <el-input v-model="form.name" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="城市" class="chengshi" label-width="68px" >
              <el-select v-model="formInline.province" placeholder="请选择"  style="width:178px;">
                <el-option v-for="item in addCitys" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item class="chengshi" label-width="68px" >
              <el-select v-model="formInline.ctiy" placeholder="请选择" style="width:178px">
                <el-option v-for="item in addProvinces" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>

          <div class="top-btn" style="display:inline-block;width:440px;text-align:right">
             <el-button>清除</el-button>
              <el-button type="primary">搜索</el-button>
          </div>

          </el-form>
         </el-form>

            <!-- 数据渲染 -->
         <div style="padding-right:10px">
            <div class="Render">
            <i class="el-icon-info" style="margin-right:3px"></i>
            数据一共{{length}}条
          </div>
         </div>

      </div>
      <!-- 内容渲染 -->
      <div class="context">
      <template>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="number"
            label="试题编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            width="180">
          </el-table-column>

          <el-table-column
            prop="catalog"
            label="目录">
          </el-table-column>

          <el-table-column
            label="题型">
            <template v-slot="{row}">
              {{row.questionType === "1"?'单选':(row.questionType === '2'?'多选':'简答')}}
            </template>
          </el-table-column>

          <el-table-column
            label="题干">
            <template v-slot="{row}">
            <div v-html="row.question"></div>
            </template>
          </el-table-column>

          <el-table-column
            prop="addDate"
            label="录入时间"
            :formatter="formatTime">
          </el-table-column>

          <el-table-column
            label="难度">
            <template v-slot="{row}">
              {{row.difficulty==="1"?'简单':(row.difficulty==='3'?'困难':'一般')}}
            </template>
          </el-table-column>

          <el-table-column
            prop="creator"
            label="录入人">
          </el-table-column>

          <el-table-column
            label="操作"
             width="200">
            <template v-slot='{row}'>
               <el-button title="预览" type="primary" @click="PreviewBtn(row)" icon="el-icon-view" circle class="btn-blue"></el-button>
               <el-button title="修改" type="success" icon="el-icon-edit" circle class="btn-green"></el-button>
               <el-button title="删除" type="danger" @click="removeBtn(row)" icon="el-icon-delete" circle class="btn-red"></el-button>
               <el-button title="加入精选" type="warning" icon="el-icon-check" circle class="btn-orange"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      </div>

      <!-- 分页 -->
      <div class="footer">
        <el-pagination
        background
        :current-page="page"
        :page-sizes="[3, 4, 10, 20]"
        :page-size="pagesize"
        layout=" prev, pager, next,sizes, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      </div>
    </div>

  <!-- 预览弹窗 -->
  <questionsPreview ref="refPreview" :isOpen.sync="isOpen"/>

  </div>
</template>

<script>
import { simple as simpleTags } from '@/api/hmmm/tags.js'
import { simple } from '@/api/hmmm/subjects.js'
import { list, remove, detail } from '@/api/hmmm/questions'
import { provinces, citys } from '@/api/hmmm/citys.js'
import questionsPreview from '@/module-hmmm/components/questions-preview.vue'
import { simple as secondMl } from '@/api/hmmm/directorys.js'

export default {
  components: {
    questionsPreview
  },
  data () {
    return {
      isOpen: false,
      ruleForm: {

      },
      formInline: {
        subject: '',
        subject2: '',
        province: '',
        ctiy: '',
        regionSeacodMl: ''
      },
      form: {},
      // 表单的学科数据渲染
      subjectList: [],
      subjectList2: [],
      regionSeacodMl: [],
      tableData: [],
      number: '',
      subject: '',
      catalog: '',
      addDate: '',
      questionType: '',
      creator: '',
      total: 0,
      page: 1,
      pagesize: 3,
      length: 0,
      // 城市
      addCitys: [],
      addProvinces: [],
      id: ''
    }
  },
  computed: {
  // 最大页码值
    maxPage () {
      return Math.ceil(this.total / this.pagesize)
    },
    // 每页数据是否刚好填满
    isFullPage () {
      return this.total % this.pagesize === 0
    }
  },
  watch: {
    'formInline.province' (newVale) {
      console.log(newVale)
      console.log(this.formInline.province)
      const res = citys(this.formInline.province)
      this.addProvinces = res
    },
    async  'formInline.subject' () {
      console.log('学科已经被监听')
      const res = await secondMl({ subjectID: this.formInline.subject })
      console.log(res)
      this.regionSeacodMl = res.data
      console.log(this.regionSeacodMl)
    }
  },
  created () {
    // 获取基础数据列表
    this.getCreateapiSimple()
    // 获取数据列表
    this.createapiList()

    // 城市
    this.provincesCitys()

    // 预览
    this.PreviewBtn()
    // 目录
    this.directory()
  },
  methods: {
    // utc时间转换
    formatTime (row, column) {
      const data = row[column.property]
      const dtime = new Date(data)
      const year = dtime.getFullYear()
      let month = dtime.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      let day = dtime.getDate()
      if (day < 10) {
        day = '0' + day
      }
      let hour = dtime.getHours()
      if (hour < 10) {
        hour = '0' + hour
      }
      let minute = dtime.getMinutes()
      if (minute < 10) {
        minute = '0' + minute
      }
      let second = dtime.getSeconds()
      if (second < 10) {
        second = '0' + second
      }
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
    },
    // 预览按钮
    async PreviewBtn (row) {
      console.log(row, '预览的row')
      this.id = row.id

      const res = await detail({ id: this.id })
      console.log(res, '预览返回的请求')
      this.$refs.refPreview.opendata(res.data)
      this.isOpen = true
    },
    // 地区
    async provincesCitys () {
      const res = await provinces()
      this.addCitys = res
    },

    async adderji () {
      this.formInline.subject2 = ''
      const res = await simpleTags({ subjectID: this.formInline.subject })
      console.log(res.data)
      this.subjectList2 = res.data
    },
    // 获取基础数据列表
    async getCreateapiSimple () {
      const res = await simple()
      // console.log(res.data)
      // 学科
      this.subjectList = res.data
      // console.log(this.subjectList, 1111)
    },

    // 获取数据列表
    async createapiList () {
      const res = await list({ page: this.page, pagesize: this.pagesize })
      console.log(res, 'tabel数据总列表')

      // 定义的数据列表
      this.tableData = res.data.items
      this.length = res.data.counts

      // 获取total
      this.total = res.data.counts
    },

    Preview () {
      this.$refs.refPreview.open()
    },

    // 删除
    async removeBtn (data) {
      await remove(data)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.createapiList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 分页插件
    handleSizeChange (value) {
      // console.log(value)
      this.pagesize = value
      this.createapiList()
    },
    handleCurrentChange (value) {
      // console.log(value)
      this.page = value
      this.createapiList()
    }
  }
}
</script>

<style scoped lang='less'>
.container {
padding: 10px;
  .BackColor {
    background-color: white;
    // height: 1000px;
    padding: 20px;
    // 顶部
    .top {
      .el-input--medium{
        width: 368px;
      }
      .el-select--medium{
        width: 368px;
      }
      ::v-deep .Render {
        background-color: #f4f4f5;
        height: 30px;
        padding: 5px 15px;
        font-size: 12px;
        line-height: 20px;
        color: #909399;
        border-radius: 5px;
      }
    }
    // 主体内容
    .context{
      .btn-blue {
      color: #409eff;
      background: #ecf5ff;
      border-color: #b3d8ff;
      ::v-deep.btn-blue:hover {
      background-color: #409eff;
       color: #ecf5ff;
      }
      }
      .btn-green {
      color: #67c23a;
      background: #f0f9eb;
      border-color: #c2e7b0;
      ::v-deep.btn-green:hover {
        background:#67c23a;
        color:#f0f9eb
      }
      }
      .btn-red {
      color: #f56c6c;
      background: #fef0f0;
      border-color: #fbc4c4;
      ::v-deep.btn-red:hover {
        background: #f56c6c;
        color: #fef0f0;
      }
      }
      .btn-orange {
      color: #e6a23c;
      background: #fdf6ec;
      border-color: #f5dab1;
      ::v-deep.btn-orange:hover {
        background: #e6a23c;
        color: #fdf6ec;
      }
      }

    }

    // 底部
    .footer{
      margin-top: 15px;
      text-align: right;
    }
  }
}
</style>
